<template>
  <a-dropdown>
    <span style="margin-right: 20px" @click.prevent>
      <a-avatar shape="square" :src="imgUrl">
        <template #icon><UserOutlined /></template>
      </a-avatar>
    </span>
    <template #overlay>
      <a-menu @click="onClick1">
        <a-menu-item key="1">我的主页</a-menu-item>
        <a-menu-item key="2">修改资料</a-menu-item>
        <a-menu-item key="3">退出登录</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  <a-dropdown>
    <a-badge :count="ALLMsNum" style="margin-right: 24px">
      <a class="ant-dropdown-link" @click.prevent style="margin-right: 5px">
        消息
      </a>
    </a-badge>
    <template #overlay>
      <a-menu @click="onClick2">
        <a-menu-item key="1"> 公告 <a-badge :count="NoMsNum" /> </a-menu-item>
        <a-menu-item key="2"> 点赞 <a-badge :count="0" dot /> </a-menu-item>
        <a-menu-item key="3"> 评论 <a-badge :count="CoMsNum" /> </a-menu-item>
        <a-menu-item key="4"> 私信 <a-badge :count="TalkMsNum" /> </a-menu-item>
        <a-menu-item key="5">消息设置</a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script>
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { UserOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { dologout, getMessageNum } from "../../api/user";
import { getNoticeNum, getTalkNum } from "../../api/message";
import io from "../../utils/socket";
import { message } from "ant-design-vue";

export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useStore();
    let imgUrl = "http://localhost:3000/" + sessionStorage.getItem("imgUrl");
    let ALLMsNum = ref(0);
    let CoMsNum = ref(0);
    let NoMsNum = ref(0);
    let TalkMsNum = ref(0);

    io.on("Notice", (data) => {
      message.info(data.data);
      NoMsNum.value = 1;
      ALLMsNum.value = 1;
    });

    getTalkNum({
      url: "/message/getTalkNum",
      success: (res) => {
        // console.log(res.data);
        TalkMsNum.value = res.data.num;
        ALLMsNum.value += TalkMsNum.value;
      },
      err: (err) => {
        console.log(err);
      },
    });

    getNoticeNum({
      url: "/message/getNoticeNum",
      success: (res) => {
        // console.log(res.data);
        NoMsNum.value = res.data.notRead;
        ALLMsNum.value += NoMsNum.value;
      },
      err: (err) => {
        console.log(err);
      },
    });

    getMessageNum({
      url: "/login/getMessageNum",
      success: (res) => {
        // console.log(res.data);
        CoMsNum.value = res.data.CoMsNum;
        ALLMsNum.value += CoMsNum.value;
      },
      err: (err) => {
        console.log(err);
      },
    });

    const onClick1 = ({ key }) => {
      if (key == 1) {
        sessionStorage.setItem("username", "");
        router.push({ path: "/user" });
      } else if (key == 2) {
        router.push({ path: "/userInfo/personal" });
      } else {
        dologout({
          url: "/login/dologout",
          success: () => {
            store.dispatch("setUser", false);
            sessionStorage.removeItem("Flag");
            sessionStorage.removeItem("imgUrl");
            // io.emit("logout", { uid: res.data.uid });
            router.push({ path: "/" });
          },
          err: (err) => {
            console.log(err);
          },
        });
      }
    };
    const onClick2 = ({ key }) => {
      if (key == 1) {
        router.push({ path: "/userInfo/notice1" });
      } else if (key == 2) {
        router.push({ path: "/userInfo/notice2" });
      } else if (key == 3) {
        router.push({ path: "/userInfo/notice3" });
      } else if (key == 4) {
        router.push({ path: "/userInfo/message" });
      } else {
        router.push({ path: "/userInfo/noticeSet" });
      }
    };
    return {
      onClick1,
      onClick2,
      imgUrl,
      ALLMsNum,
      CoMsNum,
      NoMsNum,
      TalkMsNum,
    };
  },
  components: {
    UserOutlined,
  },
});
</script>

<style>
</style>